<%--
  Created by IntelliJ IDEA.
  User: Sky
  Date: 2019/4/10
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/images/fiveite.ico">

    <title>人流量检测系统</title>
    <style>
        #mytable tr td {
            height: 20px;
            padding-top: 0;
            padding-bottom: 0;
            line-height: 40px;
            text-align: center;
        }

        .mark {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgb(255, 255, 255);
            z-index: 2000;
            visibility: hidden;
            transition: opacity 2s, transform 1s;
            -moz-transition: opacity 2s, -moz-transform 1s;
            -webkit-transition: opacity 2s, -webkit-transform 1s;
            -o-transition: opacity 2s, -o-transform 1s;
        }

        .loadingBox {
            position: fixed;
            left: 48%;
            top: 45%;
            z-index: 2001;
        }

        .mark.show {
            visibility: visible;
        }

        .loading {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 5px solid #BEBEBE;
            border-left: 5px solid #498aca;
            margin: 0 auto;
            animation: load .5s linear infinite;
            -moz-animation: load .5s linear infinite;
            -webkit-animation: load .5s linear infinite;
            -o-animation: load .5s linear infinite;
        }

        .loading .loadText {
            text-align: center;
        }

        @-webkit-keyframes load {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @-moz-keyframes load {
            from {
                -moz-transform: rotate(0deg);
            }

            to {
                -moz-transform: rotate(360deg);
            }
        }

        @-o-keyframes load {
            from {
                -o-transform: rotate(0deg);
            }

            to {
                -o-transform: rotate(360deg);
            }
        }
    </style>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/my_animation.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/components.css" type="text/css"/>
    <link href="https://at.alicdn.com/t/font_1126822_bheq7e6ga8.css" rel="stylesheet">
    <%--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/datatables.min.css"/>--%>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
</head>

<body>
<div class="mark show">
    <div class="loadingBox">
        <div class="loading"></div>
        <div class="loadText">正在初始化</div>
    </div>
</div>
<div class="modal fade" id="operateAcc" tabindex="-1" role="dialog" aria-labelledby="operateAcc" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="operateAccTitle">更换账号</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="operateAccBody" class="modal-body">
                <div class="row">
                    <div class="col-8">
                        <div class="accItem nowAcc" id="nowAcc"></div>
                        <div class="accItem addAcc" id="addAcc">
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe634;</span>
                                </div>
                                <input type="text" id="account" class="form-control" onblur="" placeholder="账号"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe63e;</span>
                                </div>
                                <input type="password" id="password" class="form-control" placeholder="密码"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="emptyCheckDiv"></div>
                        <div class="accCheck">没有该账号</div>
                        <div class="pwdCheck">密码错误</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="universalBtn secondary" data-dismiss="modal">取消</button>
                <button type="button" id="change" class="universalBtn primary" disabled>确认更换</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="safeMsg" tabindex="-1" role="dialog" aria-labelledby="safeMeg" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="securityModalTitle">安保信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="securityModalBody">
                <div class="securityItemDiv">
                    <label>负责人</label>
                    <select id="selectSecurity" title="负责人" disabled></select>
                </div>
                <div class="securityItemDiv">
                    <label>负责地区</label><input id="locationModalInput" readonly="readonly" title="负责地区"
                                              class="securityInput"
                                              type="text" value=""/>
                </div>
                <div class="securityItemDiv">
                    <label>地址</label><input id="addressModalInput" readonly="readonly" title="地址"
                                            class="securityInput address"
                                            type="text" value=""/>
                </div>
                <div class="securityItemDiv">
                    <label>联系方式</label><input id="phone1ModalInput" readonly="readonly" title="联系方式"
                                              class="securityInput"
                                              type="text" value=""/>
                    <input readonly title="联系方式" id="phone2ModalInput" class="securityInput" type="text" value=""/>
                </div>
                <div class="securityItemDiv">
                    <label>备注</label><input id="markModelInput" readonly="readonly" title="备注" class="securityInput"
                                            type="text"
                                            value="王岗"/>
                </div>
            </div>
            <div class="modal-footer">
                <label class="modifiedLabel">
                    <input id="isLocked" class="modifiedInputInLabel" title="修改" type="checkbox"/>
                    <i class="icon"></i>
                </label>
                <div class="emptyModalFooterDiv"></div>
                <button type="button" id="modified" class="universalBtn primary">应用更改</button>
                <button type="button" class="universalBtn secondary modalFooterBtn" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div id="bg">
    <div id="lg_nav" class="lg_nav hidden-sm fixed-top colorBg">
        <div id="lg_nav_buttom">
            <a href="${pageContext.request.contextPath}/default" class="lg_nav_item">
                <p class="logo unAbleSelect"><i class="iconfont">&#xe630;</i> <span id="logo"
                                                                                    class="logoico">人流量预警云平台</span></p>
            </a>
            <a class="lg_nav_item bk_hover bk_active">实时预警</a>
            <a href="${pageContext.request.contextPath}/history" class="lg_nav_item bk_hover">历史记录</a>
            <a href="${pageContext.request.contextPath}/admin/handler" id="admin"
               class="lg_nav_item bk_hover adminBtn hide">管理员<label
                    class=""></label></a>
            <a href="${pageContext.request.contextPath}/setting" class="lg_nav_item bk_hover">设置</a>
            <div id="headerFeild" class="lg_nav_item">
                <div class="headerTop head_hover">
                    <span id="nickname">正在加载</span>
                </div>
                <div class="accSet colorBg">
                    <ul>

                        <li id="changeAcc">更换账号</li>
                        <li id="logoutAcc"><a href="${pageContext.request.contextPath}/">退出账号</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="default_layout">
        <div class="grad interval"></div>
    </div>
</div>
<div class="m_layout">
    <div class="side_layout real_side">
        <%--<h6 id="RTSetting">表格设置</h6>--%>
        <div class="RTSettingItem unAbleSelect">
            <label id="refreshTime" class="refreshTime">10</label>s后
            <button id="refresh" class="universalBtn info btnSize-sm">刷新</button>
        </div>
        <div class="RTSettingItem">
            <button id="AutoRefresh" class="universalBtn info">关闭自动更新</button>
        </div>
        <div class="RTSettingItem">设定上传的最低人数</div>
        <div class="RTSettingItem">
            <div class="input-group mb-3">
                <input min="10" type="number" id="yuzhi" value="10" class="form-control"
                       placeholder="Recipient's username"
                       aria-label="Recipient's username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary setyuzhi" type="button">设定阈值</button>
                </div>
            </div>
        </div>
            <div class="RTSettingItem">设定刷新时间</div>
            <div class="RTSettingItem">
                <div class="input-group mb-3">
                    <input min="10" type="number" id="refrashti" value="10" class="form-control"
                           placeholder="Recipient's username"
                           aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary setrefrashti" type="button">设定时间</button>
                    </div>
                </div>
            </div>
        <div id="img" class="realimg">
            <img id="myimg" src="" width="100%" height="100%"/>
        </div>
    </div>
    <div class="main_layout m_container">
        <table id="mytable" class="table table-striped table-bordered" style="width: 100%"></table>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<%--<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/datatables.min.js"></script>--%>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jQuery.md5.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/public.js" type="text/javascript"></script>
<script type="text/javascript">
    const securityModalTitle = $("#securityModalTitle");
    const securityModal = $("#selectSecurity");
    const addressModal = $("#addressModalInput");
    const locationModal = $("#locationModalInput");
    const phone1Modal = $("#phone1ModalInput");
    const phone2Modal = $("#phone2ModalInput");
    const markModel = $("#markModelInput");
    const refreshTimeNode = $("#refreshTime");
    const Input = $(".securityInput");
    let nowSublocation = "";
    let modifiedMap = new Map(); //数据更改Map
    let originalData = [];//模态框初始数据
    let nowData = [];//模态框更换负责人后数据
    let isAutoClose = true; //自动更新开关变量
    let RefreshTime =Cookies.get("RefreshTime")===undefined?10:Cookies.get("RefreshTime") ;//自动更新时间间隔
    let yuzhi = Cookies.get("yuzhi")===undefined?10:Cookies.get("yuzhi");
    cookiesAuth();
    $(document).ready(function () {
        (function () {
            $("#yuzhi").val(yuzhi);
            $("#refrashti").val(RefreshTime);
        })();
        $("#refreshTime").html(RefreshTime);
        const RealTable = $("#mytable").DataTable({
            responsive: true,
            bDeferRender: false,
            bScrollCollapse: false,
            rowHeight: 30,
            sScrollY: 380,
            sScrollX: '100%',
            pageLength: 8,
            bAutoWidth: true,
            order: [1, 'desc'],
            dom: 'Bfrtip',
            buttons: [{
                'extend': 'excel',
                'text': '导出为Excel统计表',//定义文字
                'title': 'Excel', //导出的excel文件名,可以拼接字符串
                'className': 'btn btn-primary', //按钮的class样式
                'exportOptions': {
                    'modifier': {
                        'page': 'all'
                    },
                    'format': { //用于导出将使用的单元格格式化函数的容器对象 format有三个子标签，header，body和foot
                        body: function (data, row, column, node) { //body区域的function，可以操作需要导出excel的数据格式
                            if (column === 3 || column === 5) {  //忽略某列
                                return '';
                            } else {
                                return data;
                            }
                        }
                    }
                }
            }, {
                'extend': 'copy',
                'text': '导出到剪切板',
                'className': 'btn btn-primary',
                'exportOptions': {
                    'modifier': {
                        'page': 'all'
                    },
                    'format': { //用于导出将使用的单元格格式化函数的容器对象 format有三个子标签，header，body和foot
                        body: function (data, row, column, node) { //body区域的function，可以操作需要导出excel的数据格式
                            if (column === 3 || column === 5) {  //忽略某列
                                return '';
                            } else {
                                return data;
                            }
                        }
                    }
                }
            }, {
                'extend': 'pdf',
                'text': '导出到pdf',//定义文字
                'title': 'pdf',
                'className': 'btn btn-primary', //按钮的class样式
                'exportOptions': {
                    'modifier': {
                        'page': 'all'
                    },
                    'format': { //用于导出将使用的单元格格式化函数的容器对象 format有三个子标签，header，body和foot
                        body: function (data, row, column, node) { //body区域的function，可以操作需要导出excel的数据格式
                            if (column === 3 || column === 5) {  //忽略某列
                                return '';
                            } else {
                                return data;
                            }
                        }
                    }
                }
            }, {
                'extend': 'csv',
                'text': '导出为csv',//定义文字
                'title': 'scv',
                'className': 'btn btn-primary', //按钮的class样式
                'exportOptions': {
                    'modifier': {
                        'page': 'all'
                    },
                    'format': { //用于导出将使用的单元格格式化函数的容器对象 format有三个子标签，header，body和foot
                        body: function (data, row, column, node) { //body区域的function，可以操作需要导出excel的数据格式
                            if (column === 3 || column === 5) {  //忽略某列
                                return '';
                            } else {
                                return data;
                            }
                        }
                    }
                }
            }],
            ajax: {
                url: '${pageContext.request.contextPath}/api/show',
                type: 'post',
                error: function () {
                    RealTable.ajax.reload();
                },
                data: function (d) {
                    let cookyuzhi = Cookies.get("yuzhi");
                    let s = cookyuzhi === undefined ? yuzhi : cookyuzhi;
                    $.extend(d, {yuzhi: s}) //给d扩展参数
                }
            },
            columnDefs: [
                {
                    targets: 5,
                    data: null,
                    title: "负责人",
                    render: function (data, type, row, meta) {
                        return "<button class='universalBtn info btnSize-sm tableBtn' data-sublocation='" + row.sublocation + "'>" + row.security + "</button>";
                    }
                },
                {
                    targets: 4,
                    data: "locationkeyX",
                    title: "坐标",
                    render: function (data, type, row, meta) {
                        return "(" + row.locationkeyX + "," + row.locationkeyY + ")"
                    }
                },
                {
                    targets: 3,
                    data: "time",
                    title: "实时图片",
                    render: function (data, type, row, meta) {
                        let datastr = data.toString();
                        let hour = row.hour.toString();
                        return "<button class='universalBtn info btnSize-sm showimg' data-sublocation='" + row.sublocation + "'>查看</button>";
                    }
                },
                {
                    targets: 2,
                    data: "time",
                    title: "数据更新时间",
                    render: function (data, type, row, meta) {
                        let datastr = data.toString();
                        let hour = row.hour.toString();
                        return datastr.substring(0, 4) + "-" + datastr.substring(4, 6) + "-" + datastr.substring(6, 8) + " " + hour.substring(1, 3) + ":" + hour.substring(3, 5);
                    }
                },
                {
                    targets: 1,
                    data: "person",
                    title: "人数"
                },
                {
                    targets: 0,
                    data: "sublocation",
                    title: "地点"
                }
            ],
            language: zh_cn
        });
        //刷新
        $("#AutoRefresh").on("click", function () {
            if (isAutoClose) {
                isAutoClose = false;
                $(this).text("打开自动更新");
                refreshTimeNode.text("-")
            } else {
                isAutoClose = true;
                $(this).text("关闭自动更新");
                if(Cookies.get("RefreshTime")===undefined){
                    refreshTimeNode.text(RefreshTime)
                }else {
                    refreshTimeNode.text(Cookies.get("RefreshTime"))
                }
            }
        });
        setInterval(function () {
            if (isAutoClose) {
                let refreshTime = parseInt(refreshTimeNode.text(), 10);
                refreshTime--;
                refreshTimeNode.text(refreshTime);
                if (refreshTime === -1) {
                    RealTable.ajax.reload();
                    console.log(Cookies.get("RefreshTime"));
                    if(Cookies.get("RefreshTime")===undefined){
                        refreshTimeNode.text(RefreshTime)
                    }else {
                        refreshTimeNode.text(Cookies.get("RefreshTime"))
                    }
                }
            }
        }, 1000);

        $("#refresh").on("click", function () {
            RealTable.ajax.reload();
            $("#refreshTime").text(RefreshTime)
        });
        //信息修改
        $(document).on("click", ".tableBtn", function () {
            //首先应该获取该对象到userid属性值
            let dataLocation = nowSublocation = $(this).attr('data-sublocation');
            $('#safeMsg').modal('show');
            $.liteAjax("${pageContext.request.contextPath}/api/security", {sublocation: dataLocation}, function (data) {
                let Msg = data[0][0];
                let allSecurity = data[1];
                let selectOpt = "";
                for (let i = 0; i < allSecurity.length; i++) {
                    if (allSecurity[i] === Msg.security) {
                        selectOpt += "<option selected>" + allSecurity[i] + "</option>";
                    } else {
                        selectOpt += "<option>" + allSecurity[i] + "</option>";
                    }
                }
                let datas = originalData = data[0][0];
                securityModalTitle.empty().append(dataLocation);
                securityModal.html(selectOpt);
                locationModal.val(datas.location);
                addressModal.val(datas.address);
                phone1Modal.val(datas.phone1);
                phone2Modal.val(datas.phone2);
                markModel.val(datas.mark);
            });
        });
        $(document).on("click", ".showimg", function () {
            console.log($(this).attr('data-sublocation'));
            $.standardAjax("${pageContext.request.contextPath}/api/getRealImg", {
                sublocation: $(this).attr('data-sublocation')
            }, function (data) {
                console.log(data);
                $("#myimg").attr("src", "data:image/jpeg;base64," + data);
            }, function (jqXHR, textStatus, errorThrown) {
                let base64 = "data:image/jpeg;base64," + jqXHR.responseText;
                console.log(base64);
                $("#myimg").attr("src", base64);
            })
        });

        function lockModified() {
            //checkbox值与输入框绑定
            if ($("#isLocked").prop("checked")) {
                Input.removeAttr("readonly", false);
                securityModal.attr("disabled", false);
                $("#modified").addClass("modifiedShow");
            } else {
                Input.attr("readonly", "readonly");
                securityModal.attr("disabled", true);
                $("#modified").removeClass("modifiedShow");
            }
        }

        $(".modifiedLabel").on("click", function () {
            lockModified();
        });
        $("#modified").on("click", function () {
            console.log(Compare(originalData, nowData));
            console.log(dataCompare(nowData));

            function dataCompare(data) {
                return data.location === locationModal.val() && data.address === addressModal.val() && data.mark === markModel.val() && data.phone1 === phone1Modal.val() && data.phone2 === phone2Modal.val();
            }

            let sendMsg = [];
            for (let sub of modifiedMap) {
                sendMsg.push([...[...sub]])
            }
            let result = 0;
            sendMsg.push([
                "sublocation", nowSublocation
            ]);
            if (Compare(originalData, nowData)) {//地区负责人未更换
                if (!dataCompare(originalData)) {//如果返回false,则说明已更改
                    $.liteAjax("${pageContext.request.contextPath}/api/modifyByLocationKey", sendMsg, function (data) {
                        if(data>0){
                            RealTable.ajax.reload();
                            $("#refreshTime").text(RefreshTime)
                        }
                    });
                } else {
                    message("未进行任何更改", 2000, "alert-primary");
                }
            } else {//已更换
                if (!dataCompare(nowData)) {//已修改
                    sendMsg.push([
                        "type", 1
                    ]);
                    $.liteAjax("${pageContext.request.contextPath}/api/replaceSecurity", sendMsg, function (data) {
                        if(data>0){
                            RealTable.ajax.reload();
                            $("#refreshTime").text(RefreshTime)
                        }
                    })
                } else {//未修改
                    sendMsg.push([
                        "type", 2
                    ]);
                    $.liteAjax("${pageContext.request.contextPath}/api/replaceSecurity", sendMsg, function (data) {
                        if(data>0){
                            RealTable.ajax.reload();
                            $("#refreshTime").text(RefreshTime)
                        }
                    })
                }
            }
            if (result === 1) {
                message("修改成功")
            }

        });
        $("#safeMsg").on('hidden.bs.modal', function (e) {
            $("#isLocked").prop("checked", false);
            lockModified();
        });
        securityModal.on("change", function () {
            $.liteAjax("${pageContext.request.contextPath}/api/queryBySecurity", {Security: $(this).val()}, function (data) {
                let datas = nowData = data[0];
                locationModal.val(datas.location);
                addressModal.val(datas.address);
                phone1Modal.val(datas.phone1);
                phone2Modal.val(datas.phone2);
                markModel.val(datas.mark);
                storageMap();
            });
        });
        Input.on("blur", function () {
            storageMap();
        });
        const storageMap = function () {
            if (nowData.length === 0) {
                modifiedMap.set("locationkey", originalData.locationkey)
            } else {
                modifiedMap.set("locationkey", nowData.locationkey)
            }
            modifiedMap.set("location", locationModal.val());
            modifiedMap.set("address", addressModal.val());
            modifiedMap.set("phone1", phone1Modal.val());
            modifiedMap.set("phone2", phone2Modal.val());
            modifiedMap.set("mark", markModel.val());
        };

        function test() {
            $.liteAjax(
                "${pageContext.request.contextPath}/api/getthirdImg",
                {id: 8718433},
                function (data) {
                    $("#myimg").attr = data;
                    console.log(data);
                }
            );
        }

        $(".setyuzhi").on("click", function () {
            Cookies.remove("yuzhi");
            Cookies.set("yuzhi", $("#yuzhi").val());
            RealTable.ajax.reload();
        });
        $(".setrefrashti").on("click",function () {
            Cookies.remove("RefreshTime");
            Cookies.set("RefreshTime",$("#refrashti").val());
            RefreshTime=$("#refrashti").val();
            RealTable.ajax.reload();
            $("#refreshTime").text(parseInt($("#refrashti").val(),10))
        })
    });
    $(".mark").removeClass("show");
</script>
</body>
</html>